<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        br+p::after{
           content:'————';
       }
      br+p::before{
          content:'商标认正：';
 }
        .selectsty{
            border:1px solid red;
            background-color:yellow;
        }
      
        .class2{
            border:1px solid blue;
        }  
        .class1{
            border:1px solid red;
        }
    </style>
  <script>
      function btnquery(){
       let cssText=document.querySelector("#cssselect").value;
       let mai=document.getElementsByTagName("main")[0];
       let nodes=mai.querySelectorAll(cssText);
       let deletenode=mai.querySelectorAll("[class~=selectsty]");
       Array.from(deletenode).forEach((item)=>{
           item.classList.remove("selectsty");
       });
                  /*这种方法效率较低
            let allNodes=mainNode.querySelectorAll("*");    //返回文档中的所有标签
            //流式操作+lambda表达式
            Array.from(allNodes).
                filter((item)=>item.classList.contains("selected")).//将CLASS属性值列表与"selected"比对，有一个相同就返回真。
                forEach((item)=>{
                    item.classList.remove("selected");
            });
            */

            console.log(nodes instanceof NodeList);
            for(let i=0,len=nodes.length;i<len;i++){
                nodes[i].classList.add("selectsty");
            }
            /*
            Array.from(nodes).forEach((item)=>{
                item.classList.add("selectsty");
            });
            */

      }
function init(){ 
   
    document.getElementById("b_uttnquery").addEventListener("click",btnquery,false);
   document.getElementById("cssselect").addEventListener("keydown",  (evyent)=>{
       alert(evyent.keyCode);
       if(evyent.keyCode==13){
           btnquery();
       }
   },false);
 
};
window.addEventListener("load",init,false);
  </script>
    
</head>
<body>
    <section>
        css选择器查询：<input type="search" id="cssselect">
        <button type="button" id="b_uttnquery">查询</button>
    </section>
    <main>
    <section>
        <h2>简单标签</h2>
    <input type="text" id="tt">
    <figure>
        <img class="borderColor borderBox" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
        <figcaption>一个小朋友</figcaption>
    </figure>
    <div>我是一个块级标签</div>
    <img hidden id="test" src="../img/ooopic_1506740284.png">
    <br>
    <p class="class1 class2">
        我是捣乱的。
    </p>
    <a class="borderColor" href="../index.html">这是一个超链接</a>我不是一个超链接
    <a>我也是一个超链接</a>
    <div >我是一个p标签中的div标签
        <nav >
            <p  >我是一个P标签</p>
            
            <a>llllll</a><br><a>gggggg</a>
        </nav>
        <p>我也是一个p标签</p>
    </div>
    <p>
        <nav class="class1">我是一个小导航</nav>
        <a href="#">我是p标签中的a标签</a>
    </p>
    </section>
    <hr>
    <section>
        <h2>盒子属性</h2>
        <div class="contentBox" style="box-sizing: content-box">
            contentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBox
        </div>
        <div class="borderBox" style="box-sizing: border-box">
            IEBox
        </div>
    </section>
    <section>
        <pre>北斗七星高，
哥舒夜带刀。
        </pre>
        <ol style="padding-left:0px;list-style-position: inside">
            <li>熊大</li>
            <li>光头强</li>
            <li>熊二</li>
        </ol>
        <ul>
            <li>熊大</li>
            <a>吉吉</a>
            <li>光头强</li>
            <li>熊二</li>
        </ul>
        <dl>
            <dt>张居正</dt>
            <dd>明朝万历年间的首辅，....</dd>
        </dl>
    </section>
    <section>
        <p style="width:300px;">
            伪元素选择器的前缀是两个冒号字符（::），但浏览器认为选择器只有一个冒号。这样它的格式就跟伪类选择器的格式一致了。虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，建议在目前还是使用单冒号的写法。
        </p>
    </section>
</main>
</body>
</html>